<template>
  <!--第一行-->
  <el-row>
    <el-col :span="24" class="grid-content" style="background-color: aliceblue">
      <div>
        路由
      </div>
    </el-col>

  </el-row>
  <!--第二行-->
  <el-row :gutter="5">
    <!-- 提示词输入框 -->
    <el-col :span="8" class="content_text" style="background-color: aquamarine">
      <div>
        <div class="label-input-group">
          <el-row class="label-container">
            <div class="label-text">正向提示词（Prompt）</div>
          </el-row>
          <el-row>
            <el-input v-model="textarea1" class="Prompt" type="textarea" resize="none" :rows="6" placeholder="Please input prompt"/>
          </el-row>
        </div>
        <el-row></el-row>
        <div class="label-input-group">
          <el-row class="label-container">
            <div class="label-text">负面提示词（Negative Prompt）</div>
          </el-row>
          <el-row>
            <el-input v-model="textarea2" class="NegativePrompt" type="textarea" resize="none" :rows="5" placeholder="Please input negative prompt"/>
          </el-row>
        </div>
      </div>
    </el-col>

    <!-- 图片输出设置框 -->
    <el-col :span="4" :offset="1" class="content_setting" style="background-color: lightcyan; display: flex; flex-direction: column;">
      <div style="display: flex; justify-content: center;">图片输出设置(待定)</div>
      <div style="margin-top: auto; display: flex; justify-content: center;">
        <el-button type="success" round @click="generateImages" :disabled="loading">生成图片</el-button>
      </div>
    </el-col>

    <!-- 图片展示框 -->
    <el-col :span="10" :offset="1" class="content_image" style="background-color: lightcyan; position: relative;">
      <div>AI生图</div>
      <div class="content_image_load">
        <div v-if="loading">加载中...</div>
        <div v-else-if="imageUrls.length">
          <div v-for="(url, index) in imageUrls" :key="index" class="image-item">
            <img :src="url" alt="Image" class="responsive-image"/>
          </div>
        </div>
        <div v-else></div>
      </div>
    </el-col>
  </el-row>

  <!-- 第三行 -->
  <el-row>
    <el-col :span="24" class="history_col">
      <div style="font-size: 13px; font-weight: bold; margin-bottom: 10px;">
        历史生图
      </div>
      <!-- 新增一个容器包裹 v-if 和 v-else -->
      <div class="history_image_load">
        <!-- 使用 v-if 确保仅当有历史图片时显示 -->
        <div v-if="historyImageUrls.length" class="image-gallery">
          <!-- 循环生成图片元素 -->
          <div v-for="(url, index) in historyImageUrls" :key="index" class="history_image-item">
            <img :src="url" alt="History Image" class="responsive-image"/>
          </div>
        </div>
        <!-- 如果没有历史图片，显示默认文本 -->
        <div v-else></div>
      </div>
    </el-col>
  </el-row>

</template>


<script lang="ts" setup>
import {ref, onMounted} from 'vue'
import api from "@/api/index.js";

const textarea1 = ref('')
const textarea2 = ref('')
const comfyui_client_id = ref('')

const loading = ref(false); // 添加一个加载状态
const imageUrls = ref<string[]>([]);
const historyImageUrls = ref<string[]>([]);

// 定义 generateImages 函数用于生成图片
// 修改 generateImages 函数
const generateImages = async () => {
  loading.value = true; // 开始加载状态
  imageUrls.value = []; // 清空图片URLs
  try {
    const requestData = {
      "workflow_id": '',
      "prompt": textarea1.value,
      "negative_prompt": textarea2.value,
    };
    // 请求生成图片
    const responseGenerateImage = await api.generate_image(requestData);
    console.log(responseGenerateImage.data)
    const { prompt_id, client_id} = responseGenerateImage.data;
    console.log(prompt_id)

    // 请求获取图片
    comfyui_client_id.value = client_id  // comfyui的客户端id
    console.log(comfyui_client_id)
    const requestPromptData = {
      "prompt_id": prompt_id,
      "client_id": comfyui_client_id.value
    };
    if (prompt_id) {
      const promptResponse = await api.get_prompt_image(requestPromptData);
      console.log("==========")
      console.log(promptResponse.data)
      // 确认后端返回的数据是 Base64 编码的图片数组
      // 如果后端没有添加 'data:image/png;base64,' 前缀，请自行添加
      imageUrls.value = promptResponse.data.map(base64String =>
          `${base64String}`
      );

      loading.value = false;

      // 在这里调用 getHistoryImages 并等待其完成
      await getHistoryImages();

    } else {
      throw new Error('No prompt_id received from the server');
    }
  } catch (error) {
    console.error('There was an error generating images or fetching history!', error);
    loading.value = false;
  }
};

const getHistoryImages = async () => {
  try {
    const requestData = {
      "client_id": comfyui_client_id.value,
    };
    // 获取历史图片
    const responseGetHistory = await api.get_history(requestData);
    console.log(responseGetHistory.data)

    historyImageUrls.value = responseGetHistory.data.map(base64String =>
        `${base64String}`
    );

  } catch (error) {
    console.error('There was an error get history images!', error);
    loading.value = false;
  }
}

// 移除 onMounted 中的自动调用 generateImages
// 现在它只会在按钮点击时触发

</script>



<style>
.el-row {
  margin-bottom: 5px;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.content_text, .content_setting, .content_image {
  height: 400px;
}


/* 新增：用于缩短标签和输入框之间的间距 */
.label-input-group {
  margin-bottom: 30px; /* 调整此值以改变间距大小 */
}

/* 添加这个类来控制标签文本的字体大小和垂直居中 */
.label-container {
  display: flex;
  align-items: center;
  height: 40px; /* 根据需要调整高度 */
  background-color: paleturquoise;
}

.label-text {
  font-size: 13px; /* 可以根据需要调整这个值 */
}

.Prompt, .NegativePrompt{
  width: 500px
}

.content_image {
  min-height: 400px;
  height: 400px;
  width: 400px;
  border: 1px solid #ccc; /* 添加边框，使用较浅的灰色 */
}

.image-item {
  margin-bottom: 10px;
}

.responsive-image {
  max-width: 100%; /* 确保图片宽度不超过容器 */
  max-height: 100%; /* 确保图片高度不超过容器 */
  object-fit: contain; /* 保持图片比例缩放 */
}

.history_col {
  border-radius: 4px;
  min-height: 240px;
  height: 240px;
  position: relative;
  overflow: hidden; /* 防止内容溢出 */
  background-color: aliceblue; /* 使用浅灰色作为背景色 */
  border: 1px solid #ccc; /* 添加边框，使用较浅的灰色 */
  padding: 10px; /* 给内部元素一些呼吸空间 */
  box-sizing: border-box; /* 确保边框和内边距包含在高度内 */
}

.content_image_load {
  /* 设置高度为父级减去标题高度 */
  height: calc(100% - 30px); /* 23px 是标题和其下边距的总和 */
  width: 100%; /* 减去左右各10px的内边距 */
  overflow: auto; /* 允许滚动 */
  padding: 2px 2px; /* 左右留有狭小边距 */
  box-sizing: border-box;
  background-color: white;
}

.history_image_load {
  /* 设置高度为父级减去标题高度 */
  height: calc(100% - 30px); /* 23px 是标题和其下边距的总和 */
  width: 100%; /* 减去左右各10px的内边距 */
  padding: 2px 2px; /* 左右留有狭小边距 */
  box-sizing: border-box;
  background-color: white;
}

.image-gallery {
  height: 100%; /* 23px 是标题和其下边距的总和 */
  display: flex;
  flex-wrap: nowrap; /* 不换行 */
  overflow-x: auto; /* 允许水平滚动 */
  padding-bottom: 10px; /* 可选：为滚动条留出空间 */
}

.history_image-item {
  margin-right: 10px; /* 图片之间的间距 */
  background-color: white; /* 给每个图片项一个白色背景 */
  border: 1px solid #ddd; /* 添加边框 */
  border-radius: 4px; /* 圆角边框 */
  padding: 5px; /* 内边距 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加轻微阴影效果 */
}

</style>

